<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
    
    <link rel="stylesheet" href="overviewmap-custom.css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
    <title>Custom Overview Map</title>
  </head>
  <body>

    <header class="navbar" role="navigation">
      <div class="container">
        <div class="display-table pull-left" id="navbar-logo-container">
          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a>
        </div>
        <!-- menu items that get hidden below 768px width -->
        <nav class='collapse navbar-collapse navbar-responsive-collapse'>
          <ul class="nav navbar-nav pull-right">
            <li><a href="../doc">Docs</a></li>
            <li><a class="active" href="index.html">Examples</a></li>
            <li><a href="../apidoc">API</a></li>
            <li><a href="https://github.com/openlayers/openlayers">Code</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="container-fluid">

      <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
        <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        This example uses OpenLayers v<span>4.4.2</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
      </div>

      <div class="row-fluid">
        <div class="span12">
          <h4 id="title">Custom Overview Map</h4>
          <div id="map" class="map"></div>

        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <p id="shortdesc">Example of OverviewMap control with advanced customization.</p>
          <div id="docs"><p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS.  You can also rotate the map using the shift key to see how the overview map reacts.</p>
</div>
          <div id="api-links">Related API documentation: <ul class="inline"><li><a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a></li>,<li><a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a></li>,<li><a href="../apidoc/ol.control.html" title="API documentation for ol.control">ol.control</a></li>,<li><a href="../apidoc/ol.control.OverviewMap.html" title="API documentation for ol.control.OverviewMap">ol.control.OverviewMap</a></li>,<li><a href="../apidoc/ol.interaction.html" title="API documentation for ol.interaction">ol.interaction</a></li>,<li><a href="../apidoc/ol.interaction.DragRotateAndZoom.html" title="API documentation for ol.interaction.DragRotateAndZoom">ol.interaction.DragRotateAndZoom</a></li>,<li><a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a></li>,<li><a href="../apidoc/ol.source.OSM.html" title="API documentation for ol.source.OSM">ol.source.OSM</a></li></ul></div>
        </div>
      </div>

      <div class="row-fluid">
        <div id="source-controls">
          <a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
          <a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a>
        </div>
        <form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
          <textarea class="hidden" name="title">Custom Overview Map</textarea>
          <textarea class="hidden" name="description">Example of OverviewMap control with advanced customization.</textarea>
          <textarea class="hidden" name="js">var overviewMapControl &#x3D; new ol.control.OverviewMap({
  // see in overviewmap-custom.html to see the custom CSS used
  className: &#x27;ol-overviewmap ol-custom-overviewmap&#x27;,
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        &#x27;url&#x27;: &#x27;https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png&#x27; +
            &#x27;?apikey&#x3D;Your API key from http://www.thunderforest.com/docs/apikeys/ here&#x27;
      })
    })
  ],
  collapseLabel: &#x27;\u00BB&#x27;,
  label: &#x27;\u00AB&#x27;,
  collapsed: false
});

var map &#x3D; new ol.Map({
  controls: ol.control.defaults().extend([
    overviewMapControl
  ]),
  interactions: ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom()
  ]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: &#x27;map&#x27;,
  view: new ol.View({
    center: [500000, 6000000],
    zoom: 7
  })
});
</textarea>
          <textarea class="hidden" name="css">.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}

.ol-custom-overviewmap:not(.ol-collapsed)  {
  border: 1px solid black;
}

.ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}

.ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}

.ol-custom-overviewmap:not(.ol-collapsed) button{
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}

.ol-rotate {
  top: 170px;
  right: 0;
}
</textarea>
          <textarea class="hidden" name="html">&lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
</textarea>
          <input type="hidden" name="resources" value="https://openlayers.org/en/v4.4.2/css/ol.css,https://openlayers.org/en/v4.4.2/build/ol.js">
          <input type="hidden" name="data">
        </form>
        <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Custom Overview Map&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css"&gt;
    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
    &lt;script src="https://openlayers.org/en/v4.4.2/build/ol.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      .ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      .ol-rotate {
        top: 170px;
        right: 0;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
      var overviewMapControl &#x3D; new ol.control.OverviewMap({
        // see in overviewmap-custom.html to see the custom CSS used
        className: &#x27;ol-overviewmap ol-custom-overviewmap&#x27;,
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM({
              &#x27;url&#x27;: &#x27;https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png&#x27; +
                  &#x27;?apikey&#x3D;Your API key from http://www.thunderforest.com/docs/apikeys/ here&#x27;
            })
          })
        ],
        collapseLabel: &#x27;\u00BB&#x27;,
        label: &#x27;\u00AB&#x27;,
        collapsed: false
      });

      var map &#x3D; new ol.Map({
        controls: ol.control.defaults().extend([
          overviewMapControl
        ]),
        interactions: ol.interaction.defaults().extend([
          new ol.interaction.DragRotateAndZoom()
        ]),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: &#x27;map&#x27;,
        view: new ol.View({
          center: [500000, 6000000],
          zoom: 7
        })
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
      </div>
    </div>

    <script src="./resources/common.js"></script>
    <script src="./resources/prism/prism.min.js"></script>
    <script src="loader.js?id=overviewmap-custom"></script>
  </body>
  <script>
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
    return response.json();
  }).then(function(json) {
    var latestVersion = json.version;
    document.getElementById('latest-version').innerHTML = latestVersion;
    var url = window.location.href;
    var branchSearch = url.match(/\/([^\/]*)\/examples\//);
    var cookieText = 'dismissed=-' + latestVersion + '-';
    var dismissed = document.cookie.indexOf(cookieText) != -1;
    if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '4.4.2' != latestVersion) {
      var link = url.replace(branchSearch[0], '/latest/examples/');
      fetch(link, {method: 'head'}).then(function(response) {
        var a = document.getElementById('latest-link');
        a.href = response.status == 200 ? link : '../../latest/examples/';
      });
      var latestCheck = document.getElementById('latest-check');
      latestCheck.style.display = '';
      document.getElementById('latest-dismiss').onclick = function() {
        latestCheck.style.display = 'none';
        document.cookie = cookieText;
      }
    }
  });
  </script>
</html>
